<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>163免费邮箱</title>
        <link rel="stylesheet" href="cells.css">
        <link rel="stylesheet" href="font-awesome.css">
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .header{
                height: 70px;
                padding: 0 40px;
            }
            .header-logo{
                width: 144px;
                height: 32px;
                background-image: url("163logo.png");
                background-repeat: no-repeat;
                background-size: cover;
                margin-top: 19px;
                float: left;
            }
            .header-title{
                width: 157px;
                height: 30px;
                float: left;
                font-size: 16px;
                text-align: center;
                line-height: 30px;
                border-left: 1px solid #ccc;
                color: #888;
                margin-top:19px;
                margin-left: 20px;
            }
            .header-nav{
                float: right;
                margin-top: 27px;
                margin-right: 30px;
            }
            .header-nav a{
                text-decoration: none;
                padding-left: 12px;
                display: inline-block;
                vertical-align: middle;
                color: #666;
                font-size: 12px;
            }
            .line{
                display: inline-block;
                margin-left: 12px;
                width: 1px;
                height: 12px;
                background-color: #c2c2c2;
                font-size: 0;
            }
            .main{
                height: 640px;
                background-color: rgb(68, 79, 126);
            }
            .main-inner{
                width: 1100px;
                height: 640px;
                margin: 0 auto;
            }
            .mian-theme{
                display: block;
                width: 650px;
                height: 640px;
                float: left;
                background-image: url("163ad.jpg");
                background-repeat: no-repeat;
                background-size: cover;
            }
            .main-block{
                width: 400px;
                height: 540px;
                float:left ;
                background-color: white;
                margin-top: 50px;
                border-radius: 3px;
            }
            .content{
                width: 400px;
                height: 198px;
                padding: 40px;
                margin: 20px auto;
            }
            .input1{
                width: 342px;
                height: 48px;
                border: 1px solid gainsboro;
            }
            .user{
                width: 36px;
                height: 36px;
                text-align: center;
                font-size: 16px;
            }
            .input1 input{
                width: 213px;
                height: 46px;
                border: none;
                outline: none;
            }
            .input2{
                width: 342px;
                height: 48px;
                border: 1px solid gainsboro;
                margin-top: 20px;
            }
            .input2 input{
                width: 213px;
                height: 46px;
                border: none;
                outline: none;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="header-logo"></div>
            <div class="header-title">中文邮箱第一品牌</div>
            <div class="header-nav">
                <a href="">企业邮箱</a>
                <a href="">VIP邮箱</a>
                <a href="">会员plus</a>
                <a href="">海外用户登录</a>
                <a href="">邮箱大师</a>
                <div class="line"></div>
                <a href="">帮助</a>
                <a href="">登陆反馈</a>
            </div>

        </div>
        <div class="main">
            <div class="main-inner">
                <a class="mian-theme" href=""></a>
                <div class="main-block">
                    <div class="content">
                        <div class="input1">
                            <i class="user fa fa-user"></i>
                            <input type="text" placeholder="邮箱账号或手机号码">
                            <span class="ata">@163.com</span>
                        </div>
                        <div class="input2">
                            <i class="user fa fa-lock"></i>
                            <input type="password" placeholder="输入密码">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>